<?php
Yii::app()->getClientScript()->registerCssFile(Yii::app()->theme->baseUrl . '/css/timeline-component.css');
$dataProviderActividades = Actividad::model()->searchActivites($model->tableName(), $model->id);
$colors = array('green', 'purple', 'red', 'yellow', 'blue', 'orange', 'gray', 'red', 'purple', 'yellow');
$actividades = $dataProviderActividades->getData();
$pagination = $dataProviderActividades->getPagination();
$countTotalPages = $pagination->pageCount;
?>
<script>
    $pages = <?php echo $countTotalPages ?>;
    $entidad_tipo = '<?php echo $model->tableName() ?>';
    $entidad_id = '<?php echo $model->id ?>';
    $currentPage = 0;
    $url = baseUrl + "actividades/actividad/ajaxloadingActivities/entidad_tipo/" + $entidad_tipo + '/entidad_id/' + $entidad_id + '/page/';
    $(function() {
        $("#panelActivities").slimScroll({
            color: 'rgb(0, 118, 165)',
            height: '300px',
            disableFadeOut: true
        });
        $initialH = $("#panelActivities").height();
        $("#panelActivities").scroll(function() {
            $widthDiv = ($('#panelActivities')[0].scrollHeight);
            $positionScroll = $(this).scrollTop();
            //end scroll
            if ($positionScroll >= ($widthDiv - $initialH))
            {
                ++$currentPage;
                if ($currentPage < $pages) {
                    $("#panelActivities").append('<div id="content-iconLoadPageAct" class="center"><i id="iconLoadPageAct" class="icon-loading-ajax" ></i></div>');
                    $.get($url + $currentPage + '/', function(data) {
                        $("i#iconLoadPageAct").removeClass('icon-loading-ajax');
                        $("div#content-iconLoadPageAct").remove();
                        $("ul.ulActivities").scrollTop(100);
                        $("#panelActivities").append(data);

                    });
                }
            }
        });
    });
    function updateAtivites() {
        $currentPage = 0;
        $("#panelActivities").prepend('<i id="iconLoadAtivities" class="icon-loading-ajax" ></i>');
        $.get($url + $currentPage + '/', function(data) {
            $("i#iconLoadAtivities").removeClass('icon-loading-ajax');
            $("i#iconLoadAtivities").remove();
            $("#panelActivities").html(data);
            $("#panelActivities").scrollTop(0);
            getPagination();
        });
    }
    function getPagination() {
        $.get(baseUrl + "actividades/actividad/ajaxGetPagination?entidad_tipo=" + $entidad_tipo + '&entidad_id=' + $entidad_id, function(data) {
            $pages = data;
        });
    }
    //style="height:300px;overflow-y: scroll" 
</script>
<div id="panelActivities" class="row-fluid" >

    <ul id="ulActivities_<?php echo $model->tableName() ?>_page-0" data-page="0" class="metro_tmtimeline ulActivities">
        <?php
        $i = 0;
        foreach ($actividades as $actividad):
            $mensaje = Actividad::getMensaje($actividad['oldValues']);
            ?>
            <li class = "<?php echo $colors[$i] ?>">
                <?php echo $mensaje ?>
            </li>
            <?php
            $i++;
            if ($i == count($colors)) {
                $i = 0;
            }
        endforeach;
        ?>
    </ul>
</div>